<template>
  <div class="cascader-wrapper">
    <el-cascader
        v-model="props.modelValue"
        :options="options"
        :props="optionProps"
        @change="handleChange"
        placeholder="请选择"
        :show-all-levels="false"
        :disabled="disabledValue===1"
        clearable
    ></el-cascader>
  </div>
</template>

<script setup>
const {proxy} = getCurrentInstance();
import {ref, onMounted} from 'vue';
import {getAreaList} from "@/api/system/sysCity";
const emit = defineEmits();
const options = ref([]);
import useUserStore from '@/store/modules/user'
const props = defineProps({
  modelValue: {
    type: String,
  },
  isMultiple: {
    type: Boolean,
    default: false,
  },
  isCheckStrictly:{
    type: Boolean,
    default: false,
  },
  isSave:{
    type: Boolean,
    default: false,
  },
  disabledValue: {
    type: Number,
    default: null,
  },
  qrtType:{
    type: String,
    default: null,
  }
});
const disabledValue = ref(props.disabledValue);
const optionProps = {
  value: 'value',
  label: 'label',
  children: 'children',
  emitPath: false,
  multiple: props.isMultiple,
  checkStrictly: props.isCheckStrictly
};

function handleChange(value) {
  if(!props.isSave){
    useUserStore().cityCode = (Array.isArray(value)) ? value.join(',') : value;
    useUserStore().cascaderKey += 1;
  }
  emit('update:modelValue', value);
}


onMounted(() => {
  getTableList();
});

function getTableList() {
  getAreaList({isSave:props.isSave,qrtType:props.qrtType}).then(response => {
    options.value = proxy.handleTree(response.data, "value", "parentId");
    
  });
}
</script>

<style scoped>
.cascader-wrapper {
  width: 300px;
}
</style>
